<template>
  <div class="container">
    <el-dialog
      title="题目审核"
      :visible.sync="flag"
      :before-close="handleClose"
    >
    <el-form ref="form" :model="form" :rules="rules">
      <el-row>
        <el-col>
          <el-form-item prop="chkState">
            <el-radio v-model.number="form.chkState" :label="1">通过</el-radio>
            <el-radio v-model.number="form.chkState" :label="2">拒绝</el-radio>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item prop="chkRemarks">
            <el-input type="textarea" v-model="form.chkRemarks" placeholder="请输入审核意见"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button @click="okClose" type="primary">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { choiceCheck } from '@/api/hmmm/questions.js'
export default {
  props: {
    flag: {
      type: Boolean,
      required: true
    },
    checkId: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      isShow: false,
      form: {
        chkState: 1,
        chkRemarks: '',
        id: this.checkId
      },
      rules: {
        chkRemarks: [
          { required: true, message: '审核意见不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleClose () {
      this.isShow = false
      this.$refs.form.resetFields()
      this.$emit('closeQuestion')
    },
    // 审核
    async okClose () {
      await this.$refs.form.validate()
      const { data } = await choiceCheck(this.form)
      // console.log(res)
      if (data.success === true) {
        this.$message.success('操作成功')
        // console.log(this.$refs.form)
        this.$refs.form.resetFields()

        this.isShow = false
        this.$emit('okClose')
      }
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-dialog {
  width: 400px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.dialog-footer {
  text-align: right;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
</style>
